import React,{useState} from 'react'
import { Button, Divider, Row, Col, Layout, Menu, theme, Space } from 'antd';
import {
    SearchOutlined,
    LogoutOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
export default function ButtonTest() {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    return (
        <div>
            <h4>Button组件</h4>
            <Button href='http://baidu.com' block danger type="primary">Primary Button</Button>
            <Button danger htmlType='submit' type='primary' shape='circle'>形状</Button>

            <Button type="primary" icon={<LogoutOutlined />}>
                Search
            </Button>
            <Button type="dashed" onClick={() => {
                console.log('click');
            }}>dashed</Button>
            <LogoutOutlined />

            <h3>布局</h3>
            <h4>Divider</h4>
            <Divider />
            <Divider orientation="left">Left Text</Divider>
            <h4>栅格布局</h4>
            <Row>
                <Col span={12}>col-12</Col>
                <Col span={12}>col-12</Col>
            </Row>

            <h4>layout布局</h4>
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="demo-logo-vertical" />
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        items={[
                            {
                                key: '1',
                                icon: <UserOutlined />,
                                label: 'nav 1',
                            },
                            {
                                key: '2',
                                icon: <VideoCameraOutlined />,
                                label: 'nav 2',
                            },
                            {
                                key: '3',
                                icon: <UploadOutlined />,
                                label: 'nav 3',
                            },
                        ]}
                    />
                </Sider>
                <Layout>
                    <Header style={{ padding: 0, background: colorBgContainer }}>
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        Content
                    </Content>
                </Layout>
            </Layout>

            <h4>Space</h4>
            <Space size={50}>
                <Button type='primary'>保存</Button>
                <Button type='primary'>取消</Button>
                <Button type='primary'>提交</Button>
            </Space>
        </div>
    )
}
